<template>
	<view class="content">
		<image src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/home/jq-wq/bj.png"
			mode="widthFix" class="top-img"></image>
		<CustomNav :topBgColor="topBgColor" :color="titleColor" :backColor="'#999'" :isBack="true" :custom="custom"
			:title="'我要投诉'"></CustomNav>
		<view class="info-block">
			<view class="menu-block">
				<view class="menu-item1">
					<view class="round">1</view>
					<view class="txt">阅读须知</view>
				</view>
				<view class="line"></view>
				<view class="menu-item1">
					<view class="round">2</view>
					<view class="txt">填写信息</view>
				</view>
				<view class="line"></view>
				<view class="menu-item1">
					<view class="round">3</view>
					<view class="txt">投诉内容</view>
				</view>
			</view>

			<view class="text-block" v-if="type==1">
				<view class="title">被投诉项目信息</view>
				<view class="info-list">
					<view class="info-item">
						<view class="name">所属地区：</view>
					</view>
					<picker class="form-ctrl" :range="areaData" range-key="name" :value="areaIndex"
						@change="bindIndustry" disabled="">
						{{areaIndex==-1 ? "请选择所属地区" : areaData[areaIndex]['name']}}
					</picker>
				</view>
				<view class="info-list" v-if="form.projectName">
					<view class="info-item">
						<view class="name">项目名称：</view>
					</view>
					<view class="info-crl">{{form.projectName}}</view>
				</view>
				<view class="info-list">
					<view class="info-item">
						<view class="name">所属行业：</view>
					</view>
					<picker class="form-ctrl" :range="industry" range-key="name" :value="industryIndex"
						@change="bindIndustry" disabled="">
						{{industryIndex==-1 ? "请选择所属行业" : industry[industryIndex]['name']}}
					</picker>
				</view>
				<view class="info-list" v-if="form.constructionName">
					<view class="info-item">
						<view class="name">建设单位名称：</view>
					</view>
					<view class="info-crl">{{form.constructionName}}</view>
				</view>
				<view class="info-list" v-if="form.subpackageName">
					<view class="info-item">
						<view class="name">分包单位名称：</view>
					</view>
					<view class="info-crl">{{form.subpackageName}}</view>
				</view>
				<view class="info-list" v-if="form.actualLocation">
					<view class="info-item">
						<view class="name">劳动用工地址：</view>
					</view>
					<view class="info-crl">{{form.actualLocation}}</view>
				</view>
				<view class="info-list">
					<view class="info-item" v-if="form.address">
						<view class="name">详细地址：</view>
					</view>
					<view class="info-crl">{{form.address}}</view>
				</view>
			</view>
			<view class="text-block" v-else>
				<view class="title">被投诉单位信息</view>
				<view class="info-list" v-if="form.unitName">
					<view class="info-item">
						<view class="name">用人单位名称：</view>
					</view>
					<view class="info-crl">{{form.unitName}}</view>
				</view>
				<view class="info-list" v-if="form.actualLocation">
					<view class="info-item">
						<view class="name">劳动用工地址：</view>
					</view>
					<view class="info-crl">{{form.actualLocation}}</view>
				</view>
				<view class="info-list" v-if="form.address">
					<view class="info-item">
						<view class="name">详细地址：</view>
					</view>
					<view class="info-crl">{{form.address}}</view>
				</view>
				<view class="info-list">
					<view class="info-item">
						<view class="name">所属行业：</view>
					</view>
					<picker class="form-ctrl" :range="industry" range-key="name" :value="industryIndex"
						@change="bindIndustry" disabled="">
						{{industryIndex==-1 ? "请选择所属行业" : industry[industryIndex]['name']}}
					</picker>
				</view>
			</view>
			<view class="text-block">
				<view class="title">投诉人信息</view>
				<view class="info-list" v-if="form.reflectorName">
					<view class="info-item">
						<view class="name">姓名：</view>
					</view>
					<view class="info-crl">{{form.reflectorName}}</view>
				</view>
				<view class="info-list" v-if="form.idCardFront">
					<view class="info-item">
						<view class="name">身份证照片：</view>
					</view>
					<view class="img-item">
						<view class="obverse-item">
							<image :src="form.idCardFront" class="upload-img" mode="aspectFit"></image>
						</view>
						<view class="obverse-item">
							<image :src="form.idCardBack" class="upload-img" mode="aspectFit">
							</image>
						</view>
					</view>
				</view>
				<view class="info-list" v-if="form.reflectorMobile">
					<view class="info-item">
						<view class="name">手机号：</view>
					</view>
					<view class="info-crl">{{form.reflectorMobile}}</view>
				</view>
				<view class="info-list" v-if="form.isContract">
					<view class="info-item">
						<view class="name">是否签署合同：</view>
					</view>
					<view class="info-crl" v-if="form.isContract==1">是</view>
					<view class="info-crl" v-else>否</view>
				</view>
			</view>
			<view class="text-block">
				<view class="title">欠薪信息</view>
				<view class="info-list" v-if="form.salaryCount">
					<view class="info-item">
						<view class="name">涉及欠薪人数：</view>
					</view>
					<view class="info-crl">{{form.salaryCount}}人</view>
				</view>
				<view class="info-list" v-if="form.salaryAmount">
					<view class="info-item">
						<view class="name">涉及欠薪金额：</view>
					</view>
					<view class="info-crl">{{form.salaryAmount}}元</view>
				</view>
				<view class="info-list" v-if="form.salaryTime">
					<view class="info-item">
						<view class="name">欠薪发生时间：</view>
					</view>
					<view class="info-crl">{{form.salaryTime}}</view>
				</view>
				<view class="info-list" v-if="form.information">
					<view class="info-item">
						<view class="name">欠薪基本情况摘要：</view>
					</view>
					<view class="info-crl">{{form.information}}</view>
				</view>
			</view>
			<view class="agree-item">
				<checkbox-group @change="checkChange">
					<checkbox value="agree" :checked="agree" color="#027BFF" class="check" id="agree"></checkbox>
					<label for="agree" class="check-label">本人承诺对以上信息真实性负责</label>
				</checkbox-group>
			</view>
			<view class="btn-item">
				<view class="btn1" @click="navigate('/page_other/project_right/complaint/information')">上一步</view>
				<view class="btn" @click="submit">提交</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getCustomNav,
		showToast
	} from '@/util/util.js'
	import {
		getStorage,
		setStorage,
		removeStorage
	} from '@/util/auth.js';
	import {
		addComplaint,
		getIndustryApi
	} from '@/api/wq.js'
	
	import {
		addComplaintApi,
		addComplaintJtApi,
		addComplaintGzApi,
		addComplaintYmApi,
		addComplaintDhApi
	} from '@/api/mine.js'
	import {
		validate
	} from '@/util/validate.js'

	export default {
		data() {
			return {
				custom: null,
				topBgColor: 'rgba(0,0,0,0)',
				titleColor: '#fff',
				form: {},
				isIndustry_text: '',
				type: 1,
				industry: [],
				form1: {
					checked: []
				},
				industryIndex: -1,
				areaData: [{
						id: 1,
						name: '肃州区',
					},
					{
						id: 2,
						name: '金塔县',
					}, {
						id: 3,
						name: '瓜州县',
					},
					{
						id: 6,
						name: '玉门市',
					},
					{
						id: 7,
						name: '敦煌市',
					}
				],
				areaIndex: -1,
				rules: {
					checked: {
						name: '',
						required: false,
						validator: function(value, form1, callback) {
							if (value.length == 0) {
								callback('请勾选同意协议！');
							}
							callback();
						}
					},
				}
			}
		},
		onPageScroll(e) {
			if (e.scrollTop >= 50) {
				this.topBgColor = '#117DFF';
			} else {
				this.topBgColor = 'rgba(0,0,0,0)';
			}
		},
		methods: {
			navigate(url) {
				uni.navigateTo({
					url
				})
			},
			checkChange(e) {
				this.form1.checked = e.detail.value;
			},
			submit() {
				if (validate(this.form1, this.rules)) {
					uni.showLoading({
						title: '提交中',
						mask: true
					});
					let prefix = ''
					if (this.form.areaId == 1) {
						prefix = '/szwq'
					} else if (this.form.areaId == 2) {
						prefix = '/jtwq'
					} else if (this.form.areaId == 3) {
						prefix = '/gzwq'
					} else if (this.form.areaId == 6) {
						prefix = '/ymwq'
					} else if (this.form.areaId == 7) {
						prefix = '/behind'
					}
					let code = ''
					addComplaint(prefix,this.form).then((res) => {
						code = res
						
					})
						
						console.log(code)
			
					// if (this.form.areaId == 1) {
					// 	addComplaintApi(this.form).then((res) => {
					// 		code = res
					// 	})
					// } else if (this.form.areaId == 2) {
					// 	addComplaintJtApi(this.form).then((res) => {
					// 		code = res
					// 	})
					// } else if (this.form.areaId == 3) {
					// 	addComplaintGzApi(this.form).then((res) => {
					// 		code = res
					// 	})
					// } else if (this.form.areaId == 6) {
					// 	addComplaintYmApi(this.form).then((res) => {
					// 		code = res
					// 	})
					// } else if (this.form.areaId == 7) {
					// 	addComplaintDhApi(this.form).then((res) => {
					// 		code = res
					// 	})
					// }
					uni.showToast({
						title: '提交成功',
						icon: 'success',
						duration: 1000,
						mask: true,
						success: function() {
							setTimeout(function() {
								uni.redirectTo({
									url: '/page_other/project_right/complaint/submit?code=' +
										code
								})
							}, 1000)
						},
					})
					removeStorage('form');

				}
			},
			getIndustry() {
				let prefix = ''
				if (this.form.areaId == 1) {
					prefix = '/szwq'
				} else if (this.form.areaId == 2) {
					prefix = '/jtwq'
				} else if (this.form.areaId == 3) {
					prefix = '/gzwq'
				} else if (this.form.areaId == 6) {
					prefix = '/ymwq'
				} else if (this.form.areaId == 7) {
					prefix = '/behind'
				}
				
				getIndustryApi(prefix).then((res) => {
					this.industry = res
					this.industry.forEach((item, index) => {
						if (this.form.isIndustry == item.id) {
							this.industryIndex = index
							return
						}
						return
					})
					this.areaData.forEach((item, index) => {
						if (this.form.areaId == item.id) {
							this.areaIndex = index
							return
						}
						return
					})
				})
			},
		},
		onShow(e) {
			this.form = getStorage('form');
			this.getIndustry()
			this.form.salaryTime = this.form.starTime + '至' + this.form.endTime;
		},
		onLoad(e) {
			
			this.type = e.type
			this.custom = getCustomNav();
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;

		.top-img {
			width: 100%;
		}

		.info-block {
			display: flex;
			flex-direction: column;
			background: #F5F5F5;
			margin-top: -50rpx;
			border-radius: 60rpx;
			position: relative;
			padding: 30rpx;

			.menu-block {
				display: flex;
				border-radius: 30rpx;
				position: relative;
				padding: 40rpx;
				background: #F1F7FF;
				justify-content: center;

				.menu-item1 {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;

					.round {
						width: 50rpx;
						height: 50rpx;
						color: #fff;
						border-radius: 50%;
						background-color: #027BFF;
						display: flex;
						align-items: center;
						justify-content: center;
					}

					.txt {
						color: #027BFF;
						font-size: 32rpx;
						margin-top: 20rpx;
					}
				}

				.menu-item {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;

					.round {
						width: 50rpx;
						height: 50rpx;
						color: #fff;
						border-radius: 50%;
						background-color: #D8D8D8;
						display: flex;
						align-items: center;
						justify-content: center;
					}

					.txt {
						color: #D8D8D8;
						font-size: 32rpx;
						margin-top: 20rpx;
					}
				}

				.line {
					width: 100rpx;
					height: 2rpx;
					background-color: #D8D8D8;
					margin-top: 30rpx;
				}
			}

			.text-block {
				display: flex;
				flex-direction: column;
				background: #fff;
				border-radius: 30rpx;
				padding: 30rpx;
				background-color: #F1F7FF;
				background: #F1F7FF;
				margin-top: 30rpx;
				//background: url('https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/dh_mashangweiquan/bg-img.png') repeat;

				.title {
					color: #027BFF;
				}

				.info-list {
					display: flex;
					flex-direction: column;
					border-bottom: 1px solid #F7F7F7;
					padding-bottom: 30rpx;
					margin-top: 30rpx;

					.img-item {
						display: flex;
						margin-top: 20rpx;

						.obverse-item {
							width: calc((100% - 30rpx) /2);
							margin-right: 30rpx;

							.upload-img {
								width: 100%;
								border-radius: 10rpx;
							}
						}

						.obverse-item:last-child {
							margin-right: 0;
						}
					}

					.info-item {
						display: flex;
						align-items: center;

						.name {
							color: #999;
						}

						.must {
							color: #EA0000;
						}

						.formwork {
							color: #027BFF;
						}
					}


					.info-crl {
						margin-top: 30rpx;
					}
				}

			}

			.agree-item {
				display: flex;
				margin-top: 30rpx;
				line-height: 70rpx;
				align-items: flex-start;

				.check {
					transform: scale(0.7);
				}

				.check-label {
					font-size: 26rpx;

					.book {
						color: #027BFF;
					}
				}
			}

			.btn-item {
				width: 100%;
				display: flex;
				justify-content: center;
				margin-bottom: 50rpx;
				margin-top: 60rpx;

				.btn1 {
					width: 300rpx;
					height: 80rpx;
					background: #fff;
					border: 1px solid #027BFF;
					color: #027BFF;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 60rpx;
					margin-right: 30rpx;
				}

				.btn {
					width: 300rpx;
					height: 80rpx;
					background: #027BFF;
					color: #fff;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 60rpx;
				}
			}
		}
	}
</style>